<!--四性检测记录-->
<template>
  <div class="check-tab">
    <el-table
      :data="checkTableData"
      highlight-current-row
      @row-dblclick="rowdblClick"
      row-key="id"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      border
      height="100%"
      :row-style="{height:'40px'}"
      :cell-style="{padding:'0px'}"
      :header-cell-style="{background: '#FAFAFA', padding: 0, height: '40px', color: '#666666'}">
      <slot v-for="(item,index) in checkColumns">
        <el-table-column
          v-if="item.field!=='C_IsFile' && item.field!=='C_IsAccept' && item.field!=='C_IsSave' && item.field!=='C_IsEdit'"
          :key="index"
          :property="item.field"
          :label="item.title"
          :width="item.width"
          show-overflow-tooltip
          sortable>
        </el-table-column>
        <el-table-column
          v-if="item.field==='C_IsFile'"
          :key="index"
          :property="item.field"
          :label="item.title"
          :width="item.width">
          <template slot-scope="scope">
            <a-checkbox :checked="scope.row.C_IsFile"></a-checkbox>
          </template>
        </el-table-column>
        <el-table-column
          v-if="item.field==='C_IsAccept'"
          :key="index"
          :property="item.field"
          :label="item.title"
          :width="item.width">
          <template slot-scope="scope">
            <a-checkbox :checked="scope.row.C_IsAccept"></a-checkbox>
          </template>
        </el-table-column>
        <el-table-column
          v-if="item.field==='C_IsSave'"
          :key="index"
          :property="item.field"
          :label="item.title"
          :width="item.width">
          <template slot-scope="scope">
            <a-checkbox :checked="scope.row.C_IsSave"></a-checkbox>
          </template>
        </el-table-column>
      </slot>
    </el-table>

    <a-modal
      :maskClosable="false"
      title="检测修改"
      v-model="dialogFormVisible">
      <a-form
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 18 }"
        :form="form">
        <a-form-item label="检测类别" >
          <a-input v-decorator="[ 'C_Type' ]" disabled />
        </a-form-item>
        <a-form-item label="检测项目">
          <a-input v-decorator="[ 'C_Content' ]" disabled />
        </a-form-item>
        <a-form-item label="归档环节">
          <a-checkbox v-decorator="['C_IsFile', { valuePropName: 'checked', initialValue: true } ]" />
        </a-form-item>
        <a-form-item label="移交与接收环节">
          <a-checkbox v-decorator="['C_IsAccept', { valuePropName: 'checked', initialValue: true } ]" />
        </a-form-item>
        <a-form-item label="长期保存环节">
          <a-checkbox v-decorator="['C_IsSave', { valuePropName: 'checked', initialValue: true } ]" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import pick from 'lodash.pick'
export default {
  name: '',
  components: {
  },
  data () {
    return {
      checkTableData: [
        {
          id: 1,
          C_Type: '真实性',
          children: [{
              id: 11,
              C_Type: '真实性',
              C_Content: '固化信息有效检测',
              C_IsFile: true,
              C_IsAccept: true,
              C_IsSave: true,
              C_IsEdit: false
            }, {
              id: 12,
              C_Type: '真实性',
              C_Content: '元数据项（全宗号、目录号、分类号）与档案馆要求的一致性检测',
              C_IsFile: false,
              C_IsAccept: true,
              C_IsSave: false,
              C_IsEdit: true
          }]
        },
        {
          id: 2,
          C_Type: '完整性',
          children: [{
            id: 21,
            C_Type: '完整性',
            C_Content: '总件数相符性检测',
            C_IsFile: true,
            C_IsAccept: true,
            C_IsSave: true,
            C_IsEdit: true
          }, {
            id: 22,
            C_Type: '完整性',
            C_Content: '过程信息完整性检测',
            C_IsFile: true,
            C_IsAccept: true,
            C_IsSave: false,
            C_IsEdit: false
          }]
        },
        {
          id: 3,
          C_Type: '可用性',
          children: [{
            id: 31,
            C_Type: '可用性',
            C_Content: '内容数据格式检测',
            C_IsFile: true,
            C_IsAccept: true,
            C_IsSave: false,
            C_IsEdit: false
          }, {
            id: 32,
            C_Type: '可用性',
            C_Content: '内容数据格式长期可用性检测',
            C_IsFile: false,
            C_IsAccept: false,
            C_IsSave: true,
            C_IsEdit: false
          }]
        },
        {
          id: 4,
          C_Type: '安全性',
          children: [{
            id: 41,
            C_Type: '安全性',
            C_Content: '系统环境中是否安装杀毒软件检测',
            C_IsFile: true,
            C_IsAccept: false,
            C_IsSave: true,
            C_IsEdit: false
          }, {
            id: 42,
            C_Type: '安全性',
            C_Content: '载体保管环境安全性检测',
            C_IsFile: false,
            C_IsAccept: false,
            C_IsSave: true,
            C_IsEdit: false
          }]
        }
      ],
      checkColumns: [
        {
          title: '检测类别',
          field: 'C_Type'
        },
        {
          title: '检测项目',
          field: 'C_Content'
        },
        {
          title: '归档环节',
          field: 'C_IsFile'
        },
        {
          title: '移交与接收环节',
          field: 'C_IsAccept'
        },
        {
          title: '长期保存环节',
          field: 'C_IsSave'
        },
        {
          title: '是否可编辑',
          field: 'C_IsEdit'
        }
      ],
      dialogFormVisible: false,
      form: this.$form.createForm(this)
    }
  },
  created () {},
  mounted () {},
  methods: {
    rowdblClick (row) {
      if (row.C_IsEdit) {
        this.dialogFormVisible = true
        this.$nextTick(() => { // 表单赋值
          this.form.setFieldsValue(pick(row, ['C_Type', 'C_Content', 'C_IsFile', 'C_IsAccept', 'C_IsSave']))
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.check-tab {
  height: 100%;
  .el-table {
    width: 100%;
    display: flex;
    flex-direction: column;
    /deep/ .el-table__body-wrapper {
      flex: 1;
    }
  }
}
</style>
